<apes-header>
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="buttonBar"
                    (click)="onEvent($event)"></apes-button-list>
</apes-header>

<apes-content>
  <apes-card>
    <!-- 历史月份 -->

    <div apes-col apesSpan="12">
      <div style="display: flex; flex-wrap: wrap;">
        <span style="width: 100px; text-align: right; padding-right: 10px;">历史月份</span>
        <div>
          <apes-month-picker [(ngModel)]='startDate' apesPlaceHolder="开始月份"></apes-month-picker>
          ~
          <apes-month-picker [(ngModel)]='endDate' apesPlaceHolder="结束月份"></apes-month-picker>
        </div>
      </div>
      <p style="text-align: center; color: red; margin: 0;"
         [ngStyle]="{ display: hind }">
        <i class="anticon anticon-exclamation-circle-o"></i>
        必填！不能选取当月且最大时间为12个月
      </p>
    </div>
  </apes-card>

  <div apes-row apesGutter="16">
    <div apes-col nzXs="24" apesMd="12">
      <!-- 洗车投诉走势图-->
      <apes-card [apesBordered]="false" [apesTitle]="title" [apesBodyStyle]="bodyStyle">
        <ng-template #title> 洗车投诉走势图</ng-template>
        <div id="mountNode"></div>
      </apes-card>
    </div>
    <div apes-col nzXs="24" apesMd="12">
      <!-- 非洗车类投诉走势图-->
      <apes-card [apesBordered]="false" [apesTitle]="total" [apesBodyStyle]="bodyStyle">
        <ng-template #total> 非洗车类投诉走势图</ng-template>
        <div id="content"></div>
      </apes-card>
    </div>
  </div>


  <apes-card [apesBordered]="false" [apesTitle]="totil">
    <ng-template #totil> 各月份投诉率</ng-template>
    <ag-grid-angular #grid
                     style="width: 100%;" [ngStyle]="{ height: height }" class="ag-theme-balham"
                     enableColResize="true"
                     enableSorting="true"
                     enableFilter="true"

                     suppressLoadingOverlay="true"

                     [rowData]="rowData"
                     [gridOptions]="gridOptions"
                     [columnDefs]="columnDefs"
                     [pinnedBottomRowData]="pinnedBottomRowData">
    </ag-grid-angular>
  </apes-card>
</apes-content>

